<template>
	<view class="container">
		 <view class="flex2 list_item" v-for="(item,index) in list" :key="index" @click="switchFn(item)">
			 <view class="flex" >
			 	<view class="add_icon flex1">
			 		<image :src="item.avatar" style="width:80rpx;height:80rpx;border-radius: 50%;"></image>
			 	</view>
			 	<view style="font-size: 28rpx;">{{item.phone}}</view>
			 </view>
			 <view class="flex" v-if="item.currAccount==1">
				 <view class='icon'></view>
				 <view style="font-size: 24rpx;">当前登录</view>
			 </view>
		 </view>
		<view class="flex" @click="natTo" style="margin-top: 20rpx;padding-left: 20rpx;">
			<view class="add_icon flex1">
				<uni-icons type="plusempty" size="18" color="#a2a3a5"></uni-icons>
			</view>
			<view style="font-weight: 700;font-size: 28rpx;">添加账号</view>
		</view>
	</view>
</template>

<script setup>
	import { computed ,ref,reactive,toRefs,onMounted} from 'vue';
	import { onLoad,onShow, onPageScroll, onPullDownRefresh } from '@dcloudio/uni-app';
	import sheep from '@/sheep';
	
	
	const formData=ref({
		userId:''
	})
	
	const list=ref()
	list.value=[]
	onLoad(()=>{
		formData.value.userId=sheep.$store('user').userInfo.id
		// console.log(sheep.$store('user').userInfo.id);
		setTimeout(()=>{
			getList()
		},300)
	})
	
	const getList=()=>{
		sheep.$api.login.accountlist(formData.value).then(res=>{
			console.log('res',res);
			list.value=res.data
		})
	}
	
	const natTo=()=>{
		uni.navigateTo({
			url:'/pages/index/userInfo/addswitch'
		})
	}
	
	const switchFn=(item)=>{
		console.log(item);
		sheep.$store('user').logout()
		sheep.$store('user').login({ phone:item.phone,  password:item.password})
		
	}
</script>

<style lang="scss"  scoped>
	page{
		padding-top: 20rpx;
	}
	.container{
		margin: 30rpx;
		padding:20rpx;
		border-radius: 15rpx;
		background-color: #fff;
	}
	.flex{
		display:flex;
		align-items: center;
		margin-bottom: 20rpx;
	}
	.flex1{
		display:flex;
		align-items: center;
		justify-content: center;
	}
	.flex2{
		display:flex;
		align-items: center;
		justify-content: space-between;
	}
	.add_icon{
		border-radius: 50%;
		width:80rpx;
		height:80rpx;
		background-color: #f4f5f9;
		margin-right: 20rpx;
		
	}
	.list_item{
		padding:10rpx 20rpx;
		border-bottom: 2rpx solid #eee;
	}
	.icon{
		width:20rpx;
		height:20rpx;
		background-color: #41b782;
		border-radius: 50%;
		margin-right: 10rpx;
	}
</style>